<template>
	<div class="card-main">
		<div class="card-main-header f-between">
			<p class="card-main-title">快捷操作</p>
			<!-- <el-button type="primary" text size="large" @click="handleOperate">
				<el-icon class="el-icon--right"> <icon-config theme="outline" size="24" /></el-icon>
				自定义
			</el-button> -->
		</div>

		<div class="card-main-content flex">
			<div class="card_wrap">
				<div class="card_item" v-for="(item, index) in dataList" :key="index" @click="handlerLinkTo(item)">
					<div class="left">
						<img :src="getImage(item.icon)" alt="" class="icon-img" />
					</div>
					<div class="right">
						<p class="w-100">{{ item.label }}</p>
						<p class="text-gray" v-if="item.tip">{{ item.tip }}</p>
					</div>
				</div>
			</div>
		</div>
		<el-dialog v-model="visible" :title="dialogTitle" width="75%">
			<component v-if="visible" :is="whichCommon[nowRowData.component]" v-bind="nowRowData.config || {}" @refresh="handleRefresh"></component>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
let imageList = import.meta.glob(`@/assets/icons/*.webp`, { eager: true })

const whichCommon: any = {}
const nowRowData = ref({
	component: '',
	config: {},
})

const router = useRouter()
const visible = ref(false)
const dialogTitle = ref('操作')
const dataList = [
	{
		label: '政府购买',
		icon: 'icon1',
		tip: '快速进入政府购买',
		href: '/homeCare/govProject/index',
	},
	{
		label: '居家上门绩效',
		icon: 'icon1',
		href: '/homeElderly~/homeCare/govProject/index',
	},
	{
		label: '家庭养老床位',
		icon: 'icon-bed',
		href: '/familyNurseBed~/homeCare/govProject/index',
	},
	{
		label: '申诉管理',
		icon: 'icon4',
		component: '',
	},
	{ label: '银发顾问', icon: 'icon5', href: '' },
	{ label: '助餐服务', icon: 'icon-meal', href: '' },
	{ label: '推送记录', icon: 'icon2', href: '' },
]

const getImage = (name: string): string => {
	if (!name) return
	let filePath = `/src/assets/icons/${name}.webp`
	const generator: any = imageList[filePath]
	const intance = generator.default
	return intance
}

const handleOperate = () => {
	ElMessage.info('快捷功能暂未上线')
}
const handleRefresh = () => {
	visible.value = false
}
const handlerLinkTo = (item) => {
	if (item.href) {
		router.push({
			path: item.href,
		})
	} else if (item.component) {
		nowRowData.value = item
		dialogTitle.value = item.dialogTitle
		visible.value = true
	} else {
		ElMessage.info('快捷功能暂未上线')
	}
}
</script>

<style scoped lang="scss">
.text-gray {
	margin-top: 9px;
	color: rgba(28, 28, 40, 0.5);
}

.card-main {
	position: relative;
	width: 100%;
	&-title {
		font-weight: bold;
	}
	&-header {
		height: 42px;
		margin-top: 10px;
	}

	&-content {
		// flex-flow: column wrap;
		flex-flow: row wrap;
		display: flex;
		height: 140px;
		.card-box {
			height: vw(60);
			margin: 4px;
		}

		.icon-img {
			width: 36px;
			height: 36px;
		}

		.card_item {
			height: calc(50% - 5px);
			width: calc(100% / 5 - 10px);
			border-radius: 10px;
			background: #fff;
			display: flex;
			align-items: center;
			font-size: 1rem;
			.left {
				width: 2.25rem;
				height: 2.25rem;
				margin-left: 0.5rem;

				img {
					width: 100%;
					height: 100%;
				}
			}
			.right {
				margin-left: 12px;
				font-size: 1rem;
			}
			&:nth-of-type(1) {
				width: 16.5rem;
				height: 100%;
				display: flex;
				align-items: center;
				margin: 0;

				.left {
					margin: 10px 0 0 10px;
				}

				.right {
					margin: 20px 0 0 10px;
				}
			}
		}

		.card_wrap {
			gap: 10px;
			width: 100%;
			height: 100%;
			display: flex;
			flex-wrap: wrap;
			flex-direction: column;
			justify-content: space-between;
		}
		&:nth-of-type(1) {
			width: 16.5rem;
			height: 100%;
			align-items: start;
			margin: 0;
		}
	}
}
</style>
